<template>
  <div class="img-verify">
    <!--canvas画布-->
    <canvas ref="verify" :width="width" :height="height" @click="handleDraw"></canvas>
  </div>
</template>

<script>
import { reactive, onMounted, ref, toRefs } from 'vue'
export default {
  setup() {
    const verify = ref(null)
    const state = reactive({
      pool: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890', //字符串
      width: 120, //默认画布宽度
      height: 40, //默认画布高度
      imgCode: '' //画布中验证码的字符串内容
    })
    onMounted(() => {
      //初始化绘制图片验证码
      state.imgCode = draw()
    })
    //单机图片重新绘制方法
    const handleDraw = () => {
      state.imgCode = draw()
    }
    //生成随机数方法
    const randomNum = (min, max) => {
      return parseInt(Math.random() * (max - min) + min)
    }
    //生成随机颜色方法
    const randomColor = (min, max) => {
      const r = randomNum(min, max)
      const g = randomNum(min, max)
      const b = randomNum(min, max)
      return `rgb(${r}, ${g}, ${b})`
    }
    //绘制图片验证码方法
    const draw = () => {
      //获取画布实例
      const ctx = verify.value.getContext('2d')
      //填充随机颜色
      ctx.fillStyle = randomColor(180, 230)
      // console.log('fillStyle', ctx.fillStyle)
      //设置画布的形状和宽、高
      ctx.fillRect(0, 0, state.width, state.height)
      //定义一个画布内的字符变量
      let imgCode = ''
      //随机产生字符串，并且随机旋转
      for (let i = 0; i < 4; i++) {
        //随机生成4个字符串
        const text = state.pool[randomNum(0, state.pool.length)]
        imgCode += text
        //随机设置画布内字符的字号
        const fontSize = randomNum(18, 40)
        //字符随机地旋转角度
        const deg = randomNum(-30, 30)
        /**
         * 绘制字符并让4个字符在不同的位置显示的思路：
         * 1.定义字体
         * 2.定义对齐方式
         * 3.填充不同的颜色
         * 4.保存当前的状态（以防止以上状态受影响）
         * 5.平移translate()
         * 6.旋转rotate()
         * 7.填充文字
         * 8.restore出栈
         */
        ctx.font = fontSize + 'px Simhei'
        ctx.textBaseline = 'top'
        ctx.fillStyle = randomColor(80, 150)
        /**
         * save() 方法把当前状态复制一份并压入一个保存图像状态的栈中
         * 这就允许用户临时地改变图像状态
         * 通过调用restore()恢复以前的值
         * save是入栈，restore是出栈
         * 用来保存Canvas的状态，入栈之后，可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作方法。restore用来恢复canvas之前保存的状态，防止入栈后对Canvas执行的操作对后续的绘制有影响
         */
        ctx.save()
        //随机旋转字符串
        ctx.translate(30 * i + 15, 15)
        ctx.rotate((deg * Math.PI) / 180)
        //fillText() 方法用于在画布上绘制填色的文本，文本的默认颜色是黑色
        //使用font属性定义字体和字号，并使用fillStyle属性以另一种颜色/渐变渲染文本
        //context.fillText(text, x, y, maxWidth);
        ctx.fillText(text, -15 + 5, -15)
        ctx.restore()
      }
      //随机生成5条干扰线，干扰线的颜色要浅一点
      for (let i = 0; i < 5; i++){
        ctx.beginPath()
        ctx.moveTo(randomNum(0, state.width), randomNum(0, state.height))
        ctx.lineTo(randomNum(0, state.width), randomNum(0, state.height))
        ctx.strokeStyle = randomColor(180, 230)
        ctx.closePath()
        ctx.stroke()
      }
      //随机生成40个干扰的小点
      for (let i = 0; i < 40; i++) {
        ctx.beginPath()
        ctx.arc(randomNum(0, state.width), randomNum(0, state.height), 1, 0, 2 * Math.PI)
        ctx.closePath()
        ctx.fileStyle = randomColor(150, 200)
        ctx.fill()
      }
      //最终返回随机生成的验证码，也就是4个字符
      return imgCode
    }
    return {
      ...toRefs(state),
      verify,
      handleDraw
    }
  }
}
</script>
<style type="text/css">
.img-verify canvas {
  cursor: pointer;
}
</style>